import pos, { PosAppCustomer, PosGetIn } from 'api/pos';
import { InfoLayout, RadiusButton, Toast } from 'components';
import { PosModule } from 'native-modules';
import React, { Fragment, useEffect, useState } from 'react';
import { Image, ScrollView, Text, View } from 'react-native';
import { NavigationStackScreenComponent } from 'react-navigation-stack';
import { getAuthorization } from 'services/authorization';
import { commonStyle, definedColors, themeColors, translateSize } from 'styles';

import assets from './assets';
import { paySuccessStyle } from './styles';
import Loading from 'components/loading';
import { goBack } from 'services/navigation';

export interface PaySuccessProps {
	posAppGetin: PosGetIn
	customer: PosAppCustomer
}

const PaySuccessScreen: NavigationStackScreenComponent<PaySuccessProps> = props => {
	const [posAppGetin, setPosAppGetin] = useState<PosGetIn>({})
	const [customer, setCustomer] = useState<PosAppCustomer>({})
	useEffect(() => {
		setPosAppGetin(props.navigation.getParam('posAppGetin'))
		setCustomer(props.navigation.getParam('customer'))
	}, [])
	const syncSap = () => {
		pos.posApp.getCreatestk({ id: posAppGetin.id }).then(res => {
			if (res.result) {
				Toast.show('同步成功')
				setPosAppGetin(res.data)
			} else {
				Toast.show('同步失败!' + res.msg)
			}
		}).catch(err => {
			Toast.show('同步失败!' + err || err.msg || '')
		})
	}
	const selectFee = () => {
		props.navigation.navigate('ChangeFee', {
			posAppGetin
		})
	}
	const printVoucher = () => {
		if (posAppGetin.networkStatus !== 1) {
			Toast.show('请先生成电子票据！')
			return
		}
	}
	// 银联的调用不能并发
	let ylFlag = false
	return (
		<ScrollView style={[commonStyle.containerColumn, { backgroundColor: themeColors.pageBg }]}>
			<View style={[commonStyle.containerRow, paySuccessStyle.iconView]}>
				<Image source={assets.images.user_name} style={paySuccessStyle.icon} />
				<Text style={paySuccessStyle.title}>支付成功</Text>
			</View>
			<View style={[commonStyle.containerRow, paySuccessStyle.moneyView]}>
				<Text style={paySuccessStyle.money}>{posAppGetin.amount}</Text>
				<Text style={paySuccessStyle.unit}>元</Text>
			</View>
			<InfoLayout title="客户姓名：" content={customer.name} />
			<InfoLayout title="项目名称：" content={getAuthorization().project.name} />
			<InfoLayout title="收款时间：" content={`${posAppGetin.date} ${posAppGetin.time}`} />
			<InfoLayout title="打印小票：" contentView={< RadiusButton style={{ ...commonStyle.ringButton, ...paySuccessStyle.btnPosPrint }} onPress={() => {
				if (ylFlag) return
				ylFlag = true
				PosModule.rePrint(posAppGetin.traceNo).finally(() => {
					ylFlag = false
				})
			}}>
				<Text >重打pos小票</Text>
			</RadiusButton >} />
			<InfoLayout title="数据同步：" contentView={<Fragment>{
				posAppGetin.syncStatus === 1 ? <Text style={commonStyle.successText}>同步成功</Text> :
					<Fragment><Text style={commonStyle.noDataWarn}>同步失败</Text><RadiusButton style={{ ...commonStyle.ringButton, ...paySuccessStyle.btnPosPrint }} onPress={() => syncSap}>
						<Text >数据同步</Text>
					</RadiusButton ></Fragment>}</Fragment>} />
			<View style={[commonStyle.containerRow]}>
				<RadiusButton style={{ ...commonStyle.ringButton, ...paySuccessStyle.btnReceipt }} onPress={() => { selectFee() }}>
					<Text>生成电子收据</Text>
				</RadiusButton>
				<RadiusButton style={{ ...commonStyle.ringButton, ...paySuccessStyle.btnReceipt }} onPress={() => { selectFee() }}>
					<Text>打印收据</Text>
				</RadiusButton>
			</View>
			<View style={paySuccessStyle.buttonContainer}>
				<RadiusButton onPress={() => {
					props.navigation.push('AppHome')
				}} style={{ marginBottom: translateSize(36) }}>
					<Text style={{ color: definedColors.white, fontSize: translateSize(36) }}>返回主页</Text>
				</RadiusButton>
				<RadiusButton onPress={() => {
					if (posAppGetin.scene === "szsk" || posAppGetin.scene === "ssxf") {
						goBack()
					} else if (posAppGetin.scene === "slk" || posAppGetin.scene === "sbck" || posAppGetin.scene === "sdsf") {
						props.navigation.pop()
						props.navigation.pop()
						props.navigation.pop()
					} else if (posAppGetin.scene === "scj") {
						props.navigation.pop()
						props.navigation.pop()
					}

				}}>
					<Text style={{ color: definedColors.white, fontSize: translateSize(36) }}>继续交易</Text>
				</RadiusButton>
			</View>
		</ScrollView>
	)
}

PaySuccessScreen.navigationOptions = props => {
	return {
		title: '支付成功'
	}
}

export default PaySuccessScreen
